<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" th:href="@{../../lib/layui/css/layui.css}">
    <script charset="utf-8" th:src="@{../../lib/layui/layui.js}" type="text/javascript"></script>
    <!--    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>-->
    <script th:src="@{../../js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <style>
        body {
            background-image: url(../../images/user.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
        }

        .vintage4 {
            color: gold;
            letter-spacing: 0;
            text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
        }
    </style>
</head>
<body>
<div>
    <h1 class="vintage4" th:align="center">用户信息</h1>
    <table class="layui-hide" id="user_table" lay-filter="test"></table>
</div>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <div>
            <button class="layui-btn layui-btn-danger" lay-event="delAdmins">批量删除</button>
        </div>
    </div>
</script>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit">权限修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-verify="delOne">删除</a>
</script>

<script>
    layui.use(['table'], function () {
        var table = layui.table,
            $ = layui.jquery,
            layer = layui.layer;

        table.render({
            elem: '#user_table'
            , url: '/admin/getList'
            , totalRow: true
            , toolbar: '#toolbarDemo'
            , done: function (res, curr, count) {
                var data = '[[${userInfo}]]';
                console.log(data);
                $("table").css("width", "100%");
            }
            , title: '用户数据表'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: '用户编号', fixed: 'left', sort: true, width: 120}
                    , {field: 'userName', title: '用户名'}
                    , {field: 'password', title: '密码'}
                    , {field: 'role', title: '当前可用', templet: function (data) {
                        if (data.role === true) {
                            return "<span style='color: green;'>可用</span>";

                        } else {
                            return "<span style='color: red;'>可用</span>";
                        }
                    }}
                    , {field: 'phone', title: '预留电话'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]
            ]
            , page: true
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            console.log(data);
            if (obj.event === 'delAdmins') {
                layer.confirm('真的删除多个用户吗？这可能存在风险', function (index) {
                    layer.close(index);
                    $.ajax({
                        url: "/admin/delAdmins",
                        data: {
                            adminList: JSON.stringify(data)
                        },
                        type: "Post",
                        success: function (data) {
                            console.log(data);
                            if (data.code === 0) {
                                layer.msg(data.msg, {icon: 1, time: 1500, shade: 0.4}, function () {
                                    window.location.href = "/sys/";
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 1500, shade: 0.4});
                            }
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>